.ban-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fd, #ffffff);
  padding: 40rpx;
  position: relative;
  overflow: hidden;
  
  .top-decoration {
    text-align: center;
    padding: 60rpx 0;
    animation: float 3s ease-in-out infinite;
  }
  
  .content-card {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 40rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    
    .title {
      text-align: center;
      margin-bottom: 48rpx;
      
      .main-text {
        font-size: 40rpx;
        font-weight: bold;
        color: #333333;
        display: block;
      }
      
      .sub-text {
        font-size: 24rpx;
        color: #999999;
        margin-top: 8rpx;
        display: block;
        text-transform: uppercase;
        letter-spacing: 2rpx;
      }
    }
    
    .countdown-section {
      background: #f8f9fd;
      border-radius: 16rpx;
      padding: 32rpx;
      margin-bottom: 40rpx;
      
      .time-label {
        font-size: 28rpx;
        color: #666666;
        margin-bottom: 24rpx;
        display: block;
        text-align: center;
      }
      
      .time-display {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 12rpx;
        
        .time-number {
          background: #ff4d4f;
          color: #ffffff;
          padding: 16rpx 24rpx;
          border-radius: 12rpx;
          font-size: 36rpx;
          font-weight: bold;
          min-width: 80rpx;
          text-align: center;
        }
        
        .time-unit {
          color: #666666;
          font-size: 28rpx;
          margin: 0 8rpx;
        }
      }
    }
    
    .ban-info {
      margin-bottom: 48rpx;
      
      .info-item {
        display: flex;
        align-items: flex-start;
        margin-bottom: 24rpx;
        padding: 16rpx 0;
        border-bottom: 2rpx solid #f5f6fa;
        
        &:last-child {
          border-bottom: none;
        }
        
        .label {
          font-size: 28rpx;
          color: #666666;
          min-width: 140rpx;
        }
        
        .value {
          flex: 1;
          font-size: 28rpx;
          color: #333333;
          padding-left: 24rpx;
        }
      }
    }
    
    .footer-tips {
      text-align: center;
      padding-top: 32rpx;
      border-top: 2rpx solid #f5f6fa;
      
      .tip-text {
        font-size: 26rpx;
        color: #999999;
        margin-bottom: 24rpx;
        display: block;
      }
      
      .contact-btn {
        display: inline-flex;
        align-items: center;
        gap: 8rpx;
        padding: 16rpx 32rpx;
        background: #f0f7ff;
        border-radius: 32rpx;
        color: #3c9cff;
        font-size: 28rpx;
        
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
  
  .bottom-decoration {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: -1;
    opacity: 0.6;
    
    image {
      width: 100%;
      height: 240rpx;
    }
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-20rpx);
  }
}
